<template>
  <div class="themeswitch" @click="toggle">
    <div class="mask" :class="{ in: isChecked, out: !isChecked }">
      <span>
        <svg class="icon dark" aria-hidden="true" v-if="isChecked">
          <use xlink:href="#icon-taiyang"></use>
        </svg>
        <svg class="icon dark" aria-hidden="true" v-else>
          <use xlink:href="#icon-yueliang"></use>
        </svg>
      </span>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const isChecked = ref(false)
  const emits = defineEmits(['themeToggle'])
  const toggle = () => {
    isChecked.value = !isChecked.value
    emits('themeToggle', isChecked)
  }
</script>

<style scoped lang="less">
  .themeswitch {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--background-primary);
    border-radius: 20px;
    margin: 0 30px;
    transition: all 0.4s;
    cursor: pointer;
    .mask {
      position: absolute;
      top: -5px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      transition: all 0.5s;
    }

    .in {
      left: -5px;
      background: #000;
    }

    .out {
      left: 15px;
      background: #6e40c9;
    }
  }
</style>
